<template>
  <div>
    <h1>学生管理</h1>
    <el-form :inline="true" :model="fromData" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="fromData.name" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item label="学生班级">
        <el-select v-model="fromData.className" placeholder="班级名称">
          <el-option label="一班" value="1"></el-option>
          <el-option label="二班" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSelect">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="stuList"
      style="width: 80%">
      <el-table-column
        label="学生id" align='center'  prop="id"
        width="180">
      </el-table-column>
      <el-table-column
        label="学生姓名" align='center'  prop="name"
        >
      </el-table-column>
      <el-table-column
        label="学生年龄" align='center'  prop="age"
        >
      </el-table-column>
      <el-table-column
        label="学生班级" align='center'  prop="className"
      >
      </el-table-column>
      <el-table-column
        label="学生性别" align='center' prop="sex"
        >
        <template slot-scope="scope">
          {{ scope.row.sex==1?'男':'女' }}
        </template>
      </el-table-column>
      <el-table-column align='center' label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="50">
    </el-pagination>
  </div>
  </template>
  
  <script>
  export default {
    name:"student-name",
    data () { 
      return {
        fromData: {
          name: '',
          className: ''
        },
        stuList : [
        {id:1,name:'张三',age:18,className:'1班',sex:1},
        {id:2,name:'张三',age:18,className:'1班',sex:1},
        {id:3,name:'张三',age:18,className:'1班',sex:1},
        {id:4,name:'张三',age:18,className:'1班',sex:1},
        {id:5,name:'张三',age:18,className:'1班',sex:1},
        {id:6,name:'张三',age:18,className:'1班',sex:2},
        {id:7,name:'张三',age:18,className:'1班',sex:2},
        {id:8,name:'张三',age:18,className:'1班',sex:2},
        {id:9,name:'张三',age:18,className:'1班',sex:2},
        { id: 10, name: '张三', age: 18, className: '1班', sex: 2 },
        {id:11,name:'张三',age:18,className:'1班',sex:2},
        {id:12,name:'张三',age:18,className:'1班',sex:2},
        {id:13,name:'张三',age:18,className:'1班',sex:2},
        {id:14,name:'张三',age:18,className:'1班',sex:1},
        {id:15,name:'张三',age:18,className:'1班',sex:1},
        {id:16,name:'张三',age:18,className:'1班',sex:1},
        {id:17,name:'张三',age:18,className:'1班',sex:1},
        {id:18,name:'张三',age:18,className:'1班',sex:1},
        {id:19,name:'张三',age:18,className:'1班',sex:2},
        { id: 20, name: '张三', age: 18, className: '1班', sex:2 },
        {id:21,name:'张三',age:18,className:'1班',sex:2},
        {id:22,name:'张三',age:18,className:'1班',sex:2},
        {id:23,name:'张三',age:18,className:'1班',sex:2},
        {id:24,name:'张三',age:18,className:'1班',sex:2},
        {id:25,name:'张三',age:18,className:'1班',sex:2},
        {id:26,name:'张三',age:18,className:'1班',sex:2},
        {id:27,name:'张三',age:18,className:'1班',sex:2},
        {id:28,name:'张三',age:18,className:'1班',sex:2},
        {id:29,name:'张三',age:18,className:'1班',sex:2},
        { id: 30, name: '张三', age: 18, className: '1班', sex:2 },
        { id: 31, name: '张三', age: 18, className: '1班', sex:2 },
        { id: 32, name: '张三', age: 18, className: '1班', sex:2 },
        { id: 33, name: '张三', age: 18, className: '1班', sex:2 }
      ]
      }
    },
    methods: {
      onSelect () { 
        console.log('查询姓名')
      },
      // handleEdit (index,row) { },
      // handleDelete (index,row) { }
    }
  }
  
  </script>
  <style scoped>
    .el-table {
      margin: auto;
      margin-top: 20px;
    }
   .el-pagination{
    text-align: center;
    margin-top: 20px;
   }
  </style>